<template>
  <authorization-form >
    <template slot="head">
      <div class="div-s" >
        <el-form :model="borrowForm" :rules="borrowFormRule" ref="borrowForm" label-width="100px">
          <el-row class="" style="padding-top: 5px">
            <el-col  :span="11">
              <el-form-item  label="姓名">
                <el-input readonly v-model="borrowForm.name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form-item label="选择角色" prop="roleId" :rules="{required:true,message:'请选择角色' }">
                <el-select readonly v-model="borrowForm.roleId" @change="changeRoleOption" style="width: 100%">
                  <el-option
                    v-for="item in roleOptionsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="登录账号">
                <el-input readonly v-model="borrowForm.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="登录密码" prop="password">
                <el-input v-model="borrowForm.password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="账号标记颜色">
                <el-select v-model="borrowForm.colorCode" placeholder="请选择" >
                  <el-option
                    v-for="item in colorOption"
                    :key="item.name"
                    :label="item.name"
                    :value="item.code">
                    <div style="display: flex;justify-content: space-between;align-items: center;padding: 0px 5px">
                      <div style="display: inline-block">{{item.name}}</div>
                      <div :style="`background-color: ${item.value};`" style="display: inline-block;border-radius: 50%;width:18px;height:18px"></div>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    <template slot=left><function-authorization ref="funcAuthRefs"  :isUpdatable="false" :default-checked-menu-id-list="borrowForm.menuIdList"></function-authorization></template>
    <template slot=right><data-authorization ref="dataAuthRefs" :isUpdatable="false"  :default-checked-id-list="borrowForm.deptIdList"></data-authorization></template>
    <template slot=bottom>
      <div style="display: flex;justify-content: center">
        <el-button @click="clickBack">返 回</el-button>
        <el-button type="primary" @click="borrowFormSubmit">保 存</el-button>
      </div>
    </template>
  </authorization-form>
</template>

<script>
import FunctionAuthorization from '../../customer/Component/FunctionAuthorization'
import DataAuthorization from '../../customer/Component/DataAuthorization'
import AuthorizationForm from '../../customer/Component/AuthorizationForm'
import {accountColorList} from '../../../../api/customer/commom'
import {getRoleById, getRoleList} from '../../../../api/customer/role'
export default {
  name: 'AddAccount',
  components: {AuthorizationForm, DataAuthorization, FunctionAuthorization},
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      roleOptionsList: [],
      colorOption: accountColorList,
      borrowFormId: this.id,
      rowData: {},
      borrowForm: {
        name: '',
        mobile: '',
        password: '',
        roleId: '',
        deptIdList: [],
        menuIdList: [],
        colorCode: 'deepBlue'
      },
      borrowFormRule: {
        password: [
          { required: true, message: '请填写登录密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    initForm () {
      this.borrowForm.name = ''
      this.borrowForm.mobile = ''
      this.borrowForm.password = ''
      this.borrowForm.roleId = ''
      this.borrowForm.deptIdList = []
      this.borrowForm.menuIdList = []
      this.borrowForm.colorCode = 'deepBlue'
    },
    setAddData (rowData) {
      this.rowData = rowData
    },
    refreshData () {
      this.$emit('refreshData')
    },
    clickBack () {
      this.$emit('goBack')
    },
    getRoleList () {
      getRoleList(({data}) => {
        this.roleOptionsList = data
      })
    },
    changeRoleOption (roleId) {
      getRoleById(roleId,
        ({data}) => {
          this.borrowForm.menuIdList = data.menuIdList
          this.borrowForm.deptIdList = data.deptIdList
        })
    },
    borrowFormSubmit () {
      this.$refs['borrowForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/user/employeeSave'),
            method: 'post',
            data: this.$http.adornData({
              'id': this.borrowFormId,
              'roleId': this.borrowForm.roleId,
              'password': this.borrowForm.password,
              'colorCode': this.borrowForm.colorCode
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initForm()
                  this.clickBack()
                  this.refreshData()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  },
  watch: {
    rowData (newV) {
      if (newV && newV.mobile) {
        this.borrowFormId = newV.id
        this.borrowForm.mobile = newV.mobile
        this.borrowForm.name = newV.name
        this.borrowForm.roleId = ''
        this.getRoleList()
      } else {
        this.clickBack()
        this.$message.warning('电话号码为空，需先修改手机号码')
      }
    }
  }

}
</script>
<style src="../../../../style/paging.scss"></style>
